<template>
  <div class="cliboard-container">
    <a-card class="card">
      <div class="content">
        <div class="title">输入内容，并点击复制按钮</div>
        <a-input ref="copyInput" v-model:value="copyValue" style="width: calc(100% - 200px)" />
        <a-button @click="onCopy">
          <template #icon>
            <CopyOutlined />
          </template>
        </a-button>
      </div>
      <div class="content">
        <div class="title">复制成功后可在这粘贴测试</div>
        <a-input ref="pasteInput" style="width: calc(100% - 200px)" />
      </div>
    </a-card>
  </div>
</template>
<script lang='ts' setup>
import { ref } from 'vue';
import { CopyOutlined } from '@ant-design/icons-vue';
let copyValue = ref<string>('剪贴画文本');
const copyInput = ref();

const onCopy = () => {
  // 选中文本
  copyInput.value.select();
  // 执行浏览器复制命令
  document.execCommand("copy");

}
</script>
<style lang='less' rel='stylesheet/less' scoped>
.cliboard-container {
  margin: 20px;
  height: calc(100% - 80px);

  .card {
    height: 100%;
    overflow: scroll;
    box-shadow: 0px 0px 12px rgb(0 0 0 / 12%);
    border-radius: 4px;
    margin: 8px 5px;

    .content {
      margin-bottom: 20px;

      .title {
        font-size: 15px;
        margin-bottom: 10px;
      }

    }
  }
}
</style>